<template>
  <div class="message">
    <!-- 消息通知组件 -->
    <!-- <app-notifi
      :show="showNotification"
      :match="nowHistory"
      :title="currentPlanTitle"
      @close="closeNotification"
    /> -->
    <!-- 消息通知 -->
    <div v-if="showNotification > 0" class="notifi">
      <div class="img-bg">
        <img src="@/assets/tanchuang-bg.png" style="width: 600px;height: 96px" />
        <div class="title">
          <div class="left">
            <div class="left_one">{{ nowList[0].currentPlanTitle }}</div>
            <div class="left_two">
              当前方案有【<span style="color: #e92937">1</span>个新比赛】
            </div>
          </div>
          <div class="right" @click="inNowListFalse">
            <img src="@/assets/icon-close-default.png" style="width: 24px" />
          </div>
        </div>
      </div>
      <div class="content">
        <div class="num">1</div>
        <div class="match">
          <div class="leagues">{{ nowList[0].nowHistory.league.name }}</div>
          <span>【</span>
          <div class="hteam">{{ nowList[0].nowHistory.home_name }}</div>
          <img src="@/assets/img-vs-s.png" style="margin: 0 4px" />
          <div class="ateam">{{ nowList[0].nowHistory.away_name }}</div>
          <span>】</span>
        </div>
      </div>
    </div>

    <!-- 全局音频 -->
    <audio ref="audioElement" preload="auto">
      <source
        src="http://tools.app.qubit-dance.com/sound/dx2.mp3"
        type="audio/mp3"
      />
    </audio>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { historyLastTen, myPlansNew } from "@/api/screen";
import { checkRoles } from "@/stores/roles";

const showNotification = ref(false); // 控制通知的显示
const nowHistory = ref({}); // 保存当前比赛信息
const currentPlanTitle = ref(""); // 保存当前方案标题
const audioElement = ref(null); // 引用音频元素
const initialNow = ref({}); // 保存方案的初始数据

const nowList = ref([]);
const nowListIntervalId = ref(null);
const nowListsetTimeout = ref(null);
// 计算用户角色
const userStore = useUserStore();
const userRole = computed(() => userStore.roles);

// 获取新比赛数据的函数
const fetchAllData = async () => {
  try {
    if (checkRoles([]) && localStorage.hasConnect && localStorage.token) {
      const res = await myPlansNew();
      const newPlanData = res;
      let isintervalId = false;
      
      newPlanData.forEach(async (newPlan) => {
        const code = newPlan.plan_info.code;
        const newNow = newPlan.have_new;

        // 判断是否是新方案数据
        if (!initialNow.value[code]) {
          initialNow.value[code] = { code, now: newNow };
          console.log("添加数据", initialNow.value[code]);
        } else {
          const oldNew = initialNow.value[code].now;
          if (newNow > oldNew) {
            initialNow.value[code].now = newNow;

            // 获取比赛数据
            const historyRes = await historyLastTen({ code });
            if (historyRes.length > 0) {
              let a = {
                currentPlanTitle: newPlan.plan_info.title,
                nowHistory: historyRes[0],
              };

              nowList.value.push(a);
              // currentPlanTitle.value = newPlan.plan_info.title;
              // nowHistory.value = historyRes[0];
              // console.log("有一场新的比赛", nowHistory.value)
              // showNotification.value = true;
              // playAudio();

              // // 自动隐藏通知
              // setTimeout(() => {
              //   showNotification.value = false;
              // }, 10000);
              isintervalId = true;
            }
          } else {
            initialNow.value[code].now = newNow;
          }
        }
      });

      if (isintervalId && nowList.value.length > 0) {
        console.log(newPlanData);
        inNowList()
      }
    }
  } catch (error) {
    console.error("数据获取失败", error);
  }
};

const inNowList = () => {
  clearInterval(nowListIntervalId.value);
  showNotification.value = true;
  playAudio();

  nowListIntervalId.value = setInterval(() => inNowListFalse(), 8000);
  // nowListsetTimeout.value = setTimeout(() => {
  //   showNotification.value = false;
  // },8000)
};

const inNowListFalse = () => {
  clearInterval(nowListIntervalId.value);
  showNotification.value = false;
  nowList.value.shift();

  if (nowList.value.length > 0) {
    setTimeout(() => {
      clearInterval(nowListIntervalId.value);
      inNowList();
    }, 1000);
  }
};

// 播放音频
const playAudio = () => {
  if (audioElement.value) {
    audioElement.value.play().catch((error) => {
      console.error("音频播放失败", error);
    });
  }
};

// 关闭通知
const closeNotification = () => {
  showNotification.value = false;
};

let timeoutId;

const fetchAllDataWithDelay = async () => {
  try {
    // 调用数据获取函数
    await fetchAllData(); // 等待数据获取完成

    // 在请求完成后，递归调用 setTimeout，再次启动下一个请求
    timeoutId = setTimeout(fetchAllDataWithDelay, 10000); // 10 秒后重新执行
  } catch (error) {
    // 即便出错，仍然在 10 秒后重新尝试请求
    timeoutId = setTimeout(fetchAllDataWithDelay, 10000);
  }
};

onMounted(() => {
  if (checkRoles([])) {
    fetchAllDataWithDelay(); // 初次调用
  }

  // for (let i = 0; i < 10; i++) {
  //   let b = {
  //     currentPlanTitle: "title1",
  //     nowHistory: {
  //       league: {
  //         name: "联赛1",
  //       },
  //       home_name: "主队",
  //       away_name: "客队",
  //     },
  //   };
  //   nowList.value.push(b);
  // }
  // showNotification.value = true;
});
</script>

<style scoped>
.message {
  position: fixed;
  bottom: 15vh;
  left: 52vh;
  z-index: 1000000;
}

.notifi {
  width: 600px;
  height: 180px;
  border-radius: 2px;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

.img-bg {
  position: relative;
}

.title {
  position: absolute;
  top: 24px;
  left: 188px;
}

.left {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.left_one {
  font-size: 18px;
  font-weight: bold;
}

.left_two {
  margin-top: 8px;
  width: 200px;
  height: 24px;
  border-radius: 16px;
  background-image: linear-gradient(to right, #d0eeff, #fcd4d0);
  font-size: 14px;
  padding-top: 2px;
}

.right {
  position: absolute;
  top: -12px;
  right: -200px;
  cursor: pointer;
}

.content {
  display: flex;
  justify-content: center;
  position: relative;
  margin-top: 16px;
}

.num {
  position: absolute;
  left: 40px;
  font-weight: bold;
}

.match {
  display: flex;
  justify-content: center;
}

.leagues {
  font-size: 16px;

  color: #000;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hteam {
  /* width: 140px; */
  margin-left: 8px;
  color: #e92937;
  display: block;
  overflow: hidden;
  /* 隐藏溢出的内容 */
  white-space: nowrap;
  /* 不换行 */
  text-overflow: ellipsis;
}

.ateam {
  /* width: 140px; */
  margin-right: 8px;
  color: #0071ff;
  display: block;
  overflow: hidden;
  /* 隐藏溢出的内容 */
  white-space: nowrap;
  /* 不换行 */
  text-overflow: ellipsis;
}
</style>